<script setup lang="ts">
import { onMounted, useTemplateRef } from "vue";
const left = useTemplateRef("left")
const right = useTemplateRef("right")
const resizer = useTemplateRef("resizer")

onMounted(() => {
    let isResizing = false;
    const containerWidth = resizer.value!.parentElement!.clientWidth;
    resizer.value!.addEventListener('mousedown', (e) => {
        isResizing = true;
    });

    document.addEventListener('mousemove', (e) => {
        if (!isResizing) return;
        const offsetX = e.clientX - left.value!.parentElement!.offsetLeft;
        const newColumn1Width = offsetX;
        const newColumn2Width = containerWidth - offsetX - 5;
        if (newColumn1Width < 100 || newColumn2Width < 100) {
            return
        }
        left.value!.style.flex = `0 0 ${newColumn1Width}px`;
        right.value!.style.flex = `0 0 ${newColumn2Width}px`;
    });

    document.addEventListener('mouseup', () => {
        isResizing = false;
    });
})
</script>

<template>
    <div class="container">
        <div class="column" ref="left" style="flex: 1;">
            <slot name="left"></slot>
        </div>
        <div class="resizer" ref="resizer"></div>
        <div class="column" ref="right" style="flex: 2;">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<style>
.container {
    display: flex;
    height: 98vh;
    width: 100%;
}

.column {
    position: relative;
    overflow: auto;
}

.resizer {
    width: 5px;
    /* 调整栏的宽度 */
    height: 100%;
    background: #ccc;
    cursor: ew-resize;
    /* 指示可以水平拖动 */
}
</style>